<template>
	<el-container class="page-user">
		<el-aside style="width: 240px;">
			<el-container>
				<el-header style="height: auto;display: block;">
					<div class="user-info-top">
						<!--						<el-avatar v-if="user.headPortrait" :src="user.headPortrait"-->
						<!--								   :size="70"  @click="editHeadPortrait"></el-avatar>-->
						<!--						<el-avatar v-else :size="70"  @click="editHeadPortrait">{{ user.nickname.substring(0, 1) }}</el-avatar>-->


						<sc-upload v-on:mouseover="clickEditHeadPortrait()" icon="" id="headPortrait"
								   style="margin: auto; border:none" :round="true" :height="70" :width="70"
								   :apiObj="$API.system.user.uploadHeadPortrait" v-model="user.headPortrait"
								   :title="user.nickname.substring(0, 1)" :cropper="true" :compress="1"
								   :aspectRatio="1/1"></sc-upload>

						<h2>{{ user.nickname }}</h2>
						<p v-for="(role, index) in user.roles" :key="index">
							<el-tag effect="dark" round size="large">{{ role.name }}</el-tag>
						</p>
					</div>
				</el-header>
				<el-main class="nopadding">
					<el-menu class="menu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component"
										  @click="openPage">
								<el-icon v-if="item.icon">
									<component :is="item.icon"/>
								</el-icon>
								<template #title>
									<span>{{ item.title }}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main>
			<Suspense>
				<template #default>
					<component :is="page"/>
				</template>
				<template #fallback>
					<el-skeleton :rows="3"/>
				</template>
			</Suspense>
		</el-main>
	</el-container>
</template>

<script>
import {defineAsyncComponent} from 'vue'

export default {
	name: 'userCenter',
	components: {
		account: defineAsyncComponent(() => import('./user/account')),
		seting: defineAsyncComponent(() => import('./user/seting')),
		pushSettings: defineAsyncComponent(() => import('./user/pushSettings')),
		password: defineAsyncComponent(() => import('./user/password')),
		space: defineAsyncComponent(() => import('./user/space')),
		logs: defineAsyncComponent(() => import('./user/logs')),
		upToEnterprise: defineAsyncComponent(() => import('./user/upToEnterprise'))
	},
	data() {
		return {
			menu: [
				{
					groupName: "基本设置",
					list: [
						{
							icon: "el-icon-postcard",
							title: "账号信息",
							component: "account"
						},
						{
							icon: "el-icon-operation",
							title: "个人设置",
							component: "seting"
						},
						{
							icon: "el-icon-lock",
							title: "密码",
							component: "password"
						},
						{
							icon: "el-icon-bell",
							title: "通知设置",
							component: "pushSettings"
						}
					]
				},
				{
					groupName: "数据管理",
					list: [
						{
							icon: "el-icon-coin",
							title: "存储空间信息",
							component: "space"
						},
						{
							icon: "el-icon-clock",
							title: "操作日志",
							component: "logs"
						}
					]
				},
				{
					groupName: "账号升级",
					list: [
						{
							icon: "el-icon-office-building",
							title: "升级为企业账号",
							component: "upToEnterprise"
						}
					]
				}
			],
			user: {
				username: "",
				nickname: "",
				roles: [],
				headPortrait: "",
			},
			page: "account",
			isClickTooEditHeadPortrait: false
		}
	},
	//路由跳转进来 判断from是否有特殊标识做特殊处理
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			if (from.is) {
				//删除特殊标识，防止标签刷新重复执行
				delete from.is
				//执行特殊方法
				vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
					type: 'success',
					center: true
				}).then(() => {
				}).catch(() => {
				})
			}
		})
	},
	mounted() {
		this.getInitData();
		this.setPage();
	},
	watch: {
		'user.headPortrait'(newVal) {
			if (!this.isClickTooEditHeadPortrait) {
				return;
			}
			this.editLoginUserHeadPortrait(newVal)
		}
	},
	methods: {
		async editLoginUserHeadPortrait(val) {
			let newVal = val;
			if (val) {
				let fileId = "";
				let paths = val.split("/");
				let len = 4;
				for (let i = paths.length - 1; i > 0 && len > 0; i--, len--) {
					if (len == 1) {
						fileId = paths[i] + fileId;
						continue;
					}
					fileId = "/" + paths[i] + fileId;
				}
				let indexOf = fileId.indexOf("?");
				if (indexOf != -1) {
					fileId = fileId.substring(0, indexOf);
				}
				val = fileId
			}
			let resp = await this.$API.home.personal.editLoginUserHeadPortrait.put({"headPortrait": val});
			if (resp.status != 200) {
				return;
			}
			var userInfo = this.$TOOL.data.get("USER_INFO");
			userInfo.headPortrait = newVal
			this.$TOOL.data.set("USER_INFO", userInfo);
			this.$message.success("操作成功")
		},
		clickEditHeadPortrait() {
			if (!this.isClickTooEditHeadPortrait) {
				this.isClickTooEditHeadPortrait = true
			}
		},
		async getInitData() {
			let res = await this.$API.home.personal.getLoginUserInfo.get();
			this.user.username = res.data.username;
			this.user.nickname = res.data.nickname;
			this.user.headPortrait = res.data.headPortrait;
			this.user.roles = res.data.roles
		},
		openPage(item) {
			this.page = item.index
		},
		setPage() {
			let href = window.location.href;
			let paramStr = href.split("?");
			if (paramStr.length <= 1) {
				return
			}
			if (!paramStr[1].includes("component")) {
				return
			}
			let component = paramStr[1].split("=")[1];
			this.page = component
		},
		editHeadPortrait() {

		}
	}
}
</script>
<style>
#headPortrait .el-upload--picture-card {
	border: none;
}

#headPortrait .file-empty {
	background: #c1c4cb;
}

#headPortrait .file-empty {
	background: #c1c4cb;
}

#headPortrait .el-upload {
	position: relative;
}

#headPortrait .el-upload:hover h4 {
	display: none;
}

#headPortrait .el-upload:hover:after {
	content: "上传";
	display: block;
	position: absolute;
	bottom: 0;
	background: url("") no-repeat 0px 0px;
	background-position: 24px 54px;
	background-size: 32%;
	width: 100%;
	height: 100px;
	color: #fff;
}


#headPortrait .file-empty h4 {
	color: #fff;
	font-size: 20px;
	position: relative;
	top: -16px;
}

</style>
